<style type="text/css">
    /*.E8ECEE{background: #E8ECEE!important;border:1px solid #979797!important;}*/
    .Label_btn{padding-bottom: 20px;}
    .Label_btnspan,.chose_li{background: #fff;border:1px solid #ccc;padding:5px 20px;margin-right: 20px;display: inline-block;border-radius: 5px;cursor: pointer;}
    .select2-choices{background-color: #fafafa;border: 1px solid #eee;font-size: 17px;border-radius: 5px;border-top-left-radius: 0;border-bottom-left-radius: 0;cursor: pointer;list-style: none;padding-left: 10px;}
    .chose_li{padding: 0px 20px;height: 30px;line-height: 30px;font-size: 14px;}
    .chose_li span{font-size: 12px!important;margin-left: 5px;}

    .tabs-vertical-env .tab-content{border-top:1px solid rgba(0,0,0,0.08);box-shadow: none!important;border-right:1px solid rgba(0,0,0,0.08);}
    .tabs-vertical-env .nav.tabs-vertical li>a{padding: 0px;height: 55px;line-height: 55px;}
    .w-ibox-title,.group_chosefz{padding-left: 20px;}
    .group_chosefz{margin-bottom: 0px;border-bottom: 0px!important}
    #datatable_wrapper{padding-top: 0px;border-top: 0px!important;border:0px;}
    table.table-bordered.dataTable{margin-top: 0px!important;}
    .w-tabs-vertical{border:1px solid rgba(0,0,0,0.08);background: #fff;height:765px;border-bottom: 0px;overflow: hidden;}

    /*菜单*/
        /*border-top: 2px solid #6e8cd7;*/
    .tabs-vertical-env .nav.tabs-vertical li>a{margin-bottom: 0px;border-left: 2px solid #fff;}
    .tabs-vertical-env .nav.tabs-vertical li.active>a{ border-left: 2px solid #6e8cd7!important;}
    div.dataTables_info{padding-top: 10px;}
    table.table-bordered.dataTable{border-bottom: 0px;}
    #datatable_info{border-top: 1px solid rgba(0,0,0,0.08);padding: 0px;margin-left: 0px;line-height: 45px;padding-left: 10px;}
    #datatable_paginate{border-top: 1px solid rgba(0,0,0,0.08);padding: 0px;}
    div.dataTables_paginate ul.pagination{margin-top: 7px!important;}
    .col-sm-6{padding:0px;}
    #datatable_wrapper .row {margin: 0px;}
    .w-tabs-vertical li>a{border-right: 0px!important;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 150px;padding: 0px 5px;}
    .tabs-vertical-env .nav.tabs-vertical{width: 150px;}
    .tabs-vertical-env{border-bottom:1px solid rgba(0,0,0,0.08);}
    .w-tabs-vertical{position: relative;}
    .lastTab{position: absolute!important;bottom: 0px;left: 0px;width: 150px;background: #6e8cd7;color: #fff;height: 45px;line-height: 45px;text-align: center;cursor: pointer;}
    table.dataTable thead > tr > th{border-bottom:0px!important }
    .Label_btnadd{cursor: pointer;}
    /*.lastTab button{width: 100%;height: 100%;}*/
    /*#datatable_wrapper .row .col-sm-6:nth-child(2){margin-right: 10px;}*/
</style>
<div class="page-title q-tit-change" style="margin:10px;"> 
    <a href="/customer/index">客户管理</a> > 客户分组管理
</div>
 <!-- End Row -->
<div class="col-lg-12"> 
    <div class="tabs-vertical-env" style="background: #fff;"> 
        <ul class="nav tabs-vertical w-tabs-vertical"> 
           <!--  <li class="active">
                <a href="#v-home" data-toggle="tab" aria-expanded="true">全部客户</a>
            </li> 
            <li class="">
                <a href="#v-profile" data-toggle="tab" aria-expanded="false">客户</a>
            </li> 
            <li class="lastTab">
                <a href="javascript:;" ><button type="button" class="btn btn-primary btn-ls " data-toggle="modal" id="AddGroup" style="background-color:#1ab394;border:1px solid #1ab394">添加分组</button></a>
            </li> -->

        </ul> 
        <div class="tab-content" style="width: 100%;padding: 0px;"> 
            <div class="tab-pane active " id="v-home"> 
                    <div class="panel-default">
                        <div class="">
                            <div class="ibox-title w-ibox-title">
                                <div class="title fl change_tit">全部客户</div>
                                <div class="w-ground-mange fr">
                                    
                                    <button type="button" class="btn  add_client btn-primary" data-toggle="modal" data-target="#con-close-modal">添加客户</button>
                                    
                                    <div class="btn-group w-btn-group"  style="display: none;">
                                        <button data-toggle="dropdown" class="btn btn-outline btn-default" aria-expanded="false">操作 <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li class="w-ground-rename"><a href="javascript:;" class="font-bold">重命名</a></li>
                                            <li class="w-ground-del"><a href="javascript:;" class="font-bold">删除</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="group_chosefz">
                                <span>已选择 <span class="chose_count">0</span> 人 （请先选择员工）</span>
                                <select class="form-control getGroup" disabled>
                                    <!-- <option>添加到分组</option> -->
                                </select>
                                <button type="button" class="btn btn-default m-b-5 btn-movegroup changebgr" style="display: none;">移除分组</button>
                            </div>
                            <div class="row">
                                <div class="col-md-12 col-sm-12 col-xs-12">
                                    <table id="datatable" class="table table-striped table-bordered groupmanaget_table" >
                                        <thead>
                                            <tr>
                                                <th style="text-align: center;padding:0px">
                                                   <input type="checkbox" value="" class="w-select-all">
                                                </th>
                                                <th>客户姓名</th>
                                                <th>手机号码</th>
                                                <th>标签</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                           <!--  <tr>
                                                <td style="text-align: center;">
                                                    <input type="checkbox" value="">
                                                </td>
                                                <td>Tiger Nixon</td>
                                                <td>18217093207</td>
                                                <td>
                                                    <ul class="ulhistoryTab">
                                                        <li>有意向</li>
                                                    </ul>
                                                </td>
                                            </tr> -->
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
            </div> 
           <!--  <div class="tab-pane" id="v-profile"> 
            </div> 
            <div class="tab-pane" id="v-messages"> 
            </div> 
            <div class="tab-pane" id="v-settings"> 
            </div>  -->
        </div> 
    </div> 
</div> 

<!-- 筛选标签 -->
 <div id="custom-width-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="custom-width-modalLabel" aria-hidden="true" style="display: none;z-index: 555555555555">
    <div class="modal-dialog" style="width:55%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="custom-width-modalLabel" style="text-align: center;font-size:20px; ">选择标签</h4>
            </div>
            <div class="modal-body" style="padding-bottom: 0px;">
                <div class="Label_btn" data-type="100">
                    <!-- <h4>类型</h4> -->
                    <!-- <button type="button" class="btn btn-default ">建材</button> -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn choseOk" style="background-color: #6e8cd7;border: 1px solid #6e8cd7;color: #fff;">完成</button>
            </div>
        </div>
    </div>
</div>  



<!-- 个人详情 -->
<div id="con-close-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;z-index: 22">
    <div class="modal-dialog"> 
        <div class="modal-content"> 
            <div class="modal-header" style="border-bottom: 0px;"> 
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
                <h4 class="modal-title" style="text-align: center;">添加客户</h4> 
            </div> 
            <div class="modal-body" style="padding-top: 0px;"> 
                    <div class="profile-widget text-center curstome_userdetial">
                        <div class="row"> 
                            <div class="col-md-6"> 
                                <div class="form-group"> 
                                    <label for="field-3" class="control-label">备注名称</label> 
                                    <img src=""><input type="text" class="form-control UserRemarkName"  placeholder="请填备注名称" > 
                                </div> 
                            </div> 
                            <div class="col-md-6"> 
                                <div class="form-group"> 
                                    <label for="field-3" class="control-label">选择性别</label> 
                                    <select class="form-control " id="Sex">
                                        <option value="-1">保密</option>
                                        <option value="1">男</option>
                                        <option value="0">女</option>
                                    </select>
                                </div> 
                            </div>
                        </div> 
                        <div class="row"> 
                            <div class="col-md-12"> 
                                <div class="form-group"> 
                                    <label for="field-3" class="control-label">选择分组</label> 
                                    <select class="form-control " id="chose_group">
                                        <!-- <option value="">选择分组</option> -->
                                    </select>
                                </div> 
                            </div> 
                        </div> 
                        <div class="row "> 
                            <div class="col-md-6"> 
                                <div class="form-group"> 
                                    <label for="field-1" class="control-label">联系电话</label> 
                                    <input type="text" class="form-control PhoneInfo" id="field-1" placeholder="" > 
                                </div> 
                            </div> 
                            <div class="col-md-6"> 
                                <div class="form-group"> 
                                    <label for="field-2" class="control-label">常用邮箱</label> 
                                    <input type="text" class="form-control Email" id="field-2" placeholder=""> 
                                </div> 
                            </div> 
                        </div> 
                        <div class="row"> 
                            <div class="col-md-12"> 
                                <div class="form-group"> 
                                    <label for="field-3" class="control-label">客户地址</label> 
                                    <input type="text" class="form-control Address"  placeholder="请填写省市区" > 
                                </div> 
                            </div> 
                        </div> 
                        <div class="row"> 
                            <div class="col-md-6"> 
                                <div class="form-group"> 
                                    <label for="field-4" class="control-label">客户生日</label> 
                                    <input type="date" class="form-control Birthday" id="field-4" placeholder=""> 
                                </div> 
                            </div> 
                            <div class="col-md-6"> 
                                <div class="form-group"> 
                                    <label for="field-5" class="control-label">客户标签</label> 
                                    <ul class="edit_sign">
                                        <!-- <li>已联系</li> -->
                                        <div class="edit_gochose" data-toggle="modal" data-target="#custom-width-modal">选择标签</div>
                                    </ul>
                                </div> 
                            </div> 
                        </div>
                        <div class="row"> 
                            <div class="col-md-12"> 
                                <div class="form-group no-margin"> 
                                    <label for="field-7" class="control-label">客户备注</label> 
                                    <textarea class="form-control autogrow Remark" id="field-7" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 104px;"></textarea> 
                                </div> 
                            </div> 
                        </div> 
                        <div class="modal-footer" style="border-top: 0px;padding-bottom: 15px;margin-right: 20px;"> 
                            <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button> 
                            <button type="button" class="btn btn-info edit_userinfo">添加</button> 
                        </div> 
                    </div>
            </div> 
        </div> 
    </div>
</div>

<script type="text/javascript">
    seajs.use('customer/groupmanaget');
</script>